<template>
  <div class="menjing">
    <div class="zuo" ref="zuo"></div>
    <div class="you">
      <div class="tou">
        <span>男生</span>
        <span>女生</span>
      </div>
      <div class="body">
        <div>
          <h3>332</h3>
          <p>D区寝室楼</p>
        </div>
        <div>
          <h3>387</h3>
          <p>E区寝室楼</p>
        </div>
        <div>
          <h3>123</h3>
          <p>F区寝室楼</p>
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import * as echarts from "echarts";
const zuo = ref(null);
let asd;
const option = reactive({
  color: ["#6552D5", "#70D9DA", "#54A8BF", "#3180C0", "#3067C0"],
  series: [
    {
      radius: ["32%", "50%"],
      center: ["50%", "35%"],
      type: "pie",
      label: {
        fontSize: 12,
        show: true,
        formatter: "{c}",
        color: "#fff",
        position: "outside",
      },
      emphasis: {
        disabled: true,
      },
      labelLine: {
        show: true,
        length: 5,
      },
      name: "",
      data: [
        {
          name: "nameA",
          value: 650,
        },
        {
          name: "nameB",
          value: 750,
        },
        {
          name: "nameC",
          value: 980,
        },
        {
          name: "nameD",
          value: 530,
        },
        {
          name: "nameE",
          value: 450,
        },
      ],
    },
    {
      radius: ["30%", "31%"],
      center: ["50%", "35%"],
      silent: true,
      type: "pie",
      label: { show: false },
      labelLine: { show: false },
      animation: false,
      tooltip: {
        show: false,
      },
      data: [
        {
          value: 1,
          itemStyle: {
            color: "rgba(250,250,250,0.3)",
          },
        },
      ],
    },
    {
      name: "外边框",
      type: "pie",
      clockwise: false, //顺时加载
      // silent: true,
      center: ["50%", "35%"],
      radius: ["53%", "53%"],
      label: { show: false },
      data: [
        {
          value: 9,
          name: "",
          itemStyle: {
            borderWidth: 2,
            borderColor: "#0b5263",
          },
        },
      ],
    },
  ],
});
onMounted(() => {
  asd = echarts.init(zuo.value);
  asd.setOption(option);
});
window.addEventListener("resize", function () {
  asd.resize();
});
watch(option, () => {
  asd.setOption(option);
});
</script>

<style lang="scss">
.menjing {
  width: 90%;
  height: 100%;
  margin: 2% 5%;
  background: url("../imgs/border1.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  color: #fff;
  .zuo {
    width: 35%;
    height: 100%;
    margin: 4% 0%;
    overflow: hidden;
  }
  .you {
    flex: 1;
    .tou {
      text-align: center;
      margin-top: 10%;
      span {
        padding: 0 20px;
        font-size: 16px;
      }
    }
    .body {
      display: flex;
      margin: 10% 0 5%;
      div {
        width: 33%;
        text-align: center;
        p{
            margin-top: 5%;
        }
      }
    }
    .footer {
      border-bottom: 2px solid #fff;
      margin: 0 20px;
    }
  }
}
</style>
